<template>
  <msg-box :message="message">
    <!-- 富文本消息 -->
    <u-parse show-img-menu selectable copy-link :content="content" :tagStyle="tagStyle"></u-parse>
  </msg-box>
</template>
<script setup lang="ts">
import { computed } from "vue";
import msgBox from "./msg-box.vue";

// 监听消息变化
const message = defineModel("message", {
  type: Object,
  required: false,
  default: () => {},
});

// 解析消息
const content = computed((): string => {
  return message.value.content?.text || message.value?.content || "[消息解析失败]";
});

const tagStyle = {
  span: "word-wrap: break-word",
};
</script>
<style scoped>
::v-deep ._span {
  word-wrap: break-word;
}
</style>
